{include file="common/header"}

<div class="container mx-auto px-4 py-6">
  <div class="max-w-6xl mx-auto">
    <div class="flex justify-between items-center mb-6">
      <h1 class="text-3xl font-bold">我的主动报工记录</h1>
      <a href="{:url('index/active_report/index')}" class="bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">
        <i class="fas fa-plus mr-2"></i>新增报工
      </a>
    </div>
    
    <div class="bg-white shadow-lg rounded-lg overflow-hidden">
      <div class="overflow-x-auto">
        <table class="min-w-full divide-y divide-gray-200">
          <thead class="bg-gray-50">
            <tr>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">订单信息</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">产品型号</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">生产数量</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工作时长</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">工资</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
              <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            {volist name="records" id="record"}
            <tr>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm">
                  <div class="font-medium text-gray-900">{$record.order_no}</div>
                  <div class="text-gray-500">{$record.work_date}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm">
                  <div class="font-medium text-gray-900">{$record.product_name}</div>
                  <div class="text-gray-500">{$record.model_name}</div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {$record.quantity} 件
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                {$record.work_hours} 小时
                {if condition="$record.start_time && $record.end_time"}
                <div class="text-xs text-gray-500">{$record.start_time} - {$record.end_time}</div>
                {/if}
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                <div class="text-sm">
                  <div class="font-medium text-gray-900">￥{$record.total_wage}</div>
                  <div class="text-xs text-gray-500">
                    计件: ￥{$record.piece_wage} | 计时: ￥{$record.time_wage}
                  </div>
                </div>
              </td>
              <td class="px-6 py-4 whitespace-nowrap">
                {if condition="$record.status == 0"}
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">
                  待审核
                </span>
                {elseif condition="$record.status == 1"}
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                  已通过
                </span>
                {elseif condition="$record.status == 2"}
                <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                  已拒绝
                </span>
                {/if}
              </td>
              <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                <button onclick="viewDetail({$record.id})" class="text-blue-600 hover:text-blue-900 mr-3">
                  查看详情
                </button>
                {if condition="$record.status == 0"}
                <button onclick="deleteRecord({$record.id})" class="text-red-600 hover:text-red-900">
                  删除
                </button>
                {/if}
              </td>
            </tr>
            {/volist}
          </tbody>
        </table>
      </div>
      
      {if condition="empty($records)"}
      <div class="text-center py-12">
        <i class="fas fa-inbox text-4xl text-gray-400 mb-4"></i>
        <p class="text-gray-500">暂无主动报工记录</p>
        <a href="{:url('index/active_report/index')}" class="mt-4 inline-block bg-blue-600 text-white px-6 py-2 rounded-md hover:bg-blue-700">
          立即报工
        </a>
      </div>
      {/if}
    </div>
  </div>
</div>

<!-- 详情模态框 -->
<div id="detailModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden">
  <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-1/2 shadow-lg rounded-md bg-white">
    <div class="mt-3">
      <div class="flex justify-between items-center mb-4">
        <h3 class="text-lg font-medium text-gray-900">报工详情</h3>
        <button onclick="closeDetailModal()" class="text-gray-400 hover:text-gray-600">
          <i class="fas fa-times"></i>
        </button>
      </div>
      <div id="detailContent"></div>
    </div>
  </div>
</div>

<script>
function viewDetail(id) {
    $.ajax({
        url: '/index/active_report/detail',
        method: 'GET',
        data: { id: id },
        success: function(response) {
            if (response.code === 1) {
                $('#detailContent').html(response.data);
                $('#detailModal').removeClass('hidden');
            } else {
                alert(response.msg || '获取详情失败');
            }
        },
        error: function() {
            alert('网络错误，请重试');
        }
    });
}

function closeDetailModal() {
    $('#detailModal').addClass('hidden');
}

function deleteRecord(id) {
    if (confirm('确定要删除这条报工记录吗？')) {
        $.ajax({
            url: '/index/active_report/delete',
            method: 'POST',
            data: { id: id },
            success: function(response) {
                if (response.code === 1) {
                    alert('删除成功');
                    location.reload();
                } else {
                    alert(response.msg || '删除失败');
                }
            },
            error: function() {
                alert('网络错误，请重试');
            }
        });
    }
}

// 图片预览功能
function previewImage(src) {
    // 创建图片预览模态框
    var modal = $('<div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50">' +
        '<div class="relative max-w-4xl max-h-full p-4">' +
        '<img src="' + src + '" class="max-w-full max-h-full object-contain">' +
        '<button onclick="$(this).parent().parent().remove()" class="absolute top-2 right-2 text-white text-2xl hover:text-gray-300">×</button>' +
        '</div>' +
        '</div>');
    
    $('body').append(modal);
    
    // 点击背景关闭
    modal.on('click', function(e) {
        if (e.target === this) {
            $(this).remove();
        }
    });
}
</script>

{include file="common/footer"} 